<template>
  <div class="settings-panel">
    <el-scrollbar :height="maxHeight + 'px'">
      <div class="settings-panel-area">
        <el-divider content-position="left">通用</el-divider>
        <div class="form-tab">
          <div class="form-tab__label">画布背景</div>
          <div class="form-tab__field">
            <el-color-picker v-model="state.background" />
          </div>
        </div>
        <div class="form-tab">
          <div class="form-tab__label">节点半径</div>
          <div class="form-tab__field">
            <el-slider
              v-model="nodeRadius"
              @change="(val:any) => handleFieldChange('nodeRadius', val as number)"
              :min="10"
              :max="100"
            />
          </div>
        </div>
        <div class="form-tab">
          <div class="form-tab__label">连线长度</div>
          <div class="form-tab__field">
            <el-slider
              v-model="linkLength"
              @change="(val:any) => handleFieldChange('linkLength', val as number)"
              :min="10"
              :max="160"
            />
          </div>
        </div>
        <div class="form-tab">
          <div class="form-tab__label">力模型</div>
          <div class="form-tab__field">
            <el-checkbox-group
              v-model="state.forceModelList"
              @change="
                (val:any) => handleFieldChange('forceModelList', String(val))
              "
            >
              <el-checkbox label="link">弹簧</el-checkbox>
              <el-checkbox label="collision">碰撞检测</el-checkbox>
              <el-checkbox label="gravity">引力</el-checkbox>
              <el-checkbox label="charge">电场</el-checkbox>
              <el-checkbox label="center">向心力</el-checkbox>
              <el-checkbox label="positioning">重力</el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="form-tab">
          <div class="form-tab__label">开放边界</div>
          <div class="form-tab__field">
            <el-switch
              v-model="state.openBorder"
              class="ml-2"
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
            />
          </div>
        </div>
        <div class="form-tab">
          <div class="form-tab__label">拖拽</div>
          <div class="form-tab__field">
            <el-switch
              v-model="state.dragable"
              class="ml-2"
              style="
                --el-switch-on-color: #13ce66;
                --el-switch-off-color: #ff4949;
              "
            />
          </div>
        </div>
      </div>
      <div class="settings-panel-area">
        <el-divider content-position="left">节点</el-divider>
        <div class="form-tab">
          <div class="form-tab__label">节点字体大小</div>
          <div class="form-tab__field">
            <el-input-number
              v-model="state.nodeLabelFontSize"
              :min="12"
              :max="30"
              :step="1"
            ></el-input-number>
          </div>
        </div>
        <div class="form-tab">
          <div class="form-tab__label">节点边框</div>
          <div class="form-tab__field">
            <el-input-number
              v-model="state.nodeStrokeWidth"
              :min="0"
              :max="10"
              :step="1"
            ></el-input-number>
          </div>
        </div>
        <div class="form-tab">
          <div class="form-tab__label">节点边框颜色</div>
          <div class="form-tab__field">
            <el-color-picker v-model="state.nodeStroke" />
          </div>
        </div>
        <div class="form-tab">
          <div class="form-tab__label">节点文本颜色</div>
          <div class="form-tab__field">
            <el-color-picker v-model="state.nodeLabelColor" />
          </div>
        </div>
        <div class="form-tab">
          <div class="form-tab__label">节点背景</div>
          <div class="form-tab__field">
            <el-radio-group
              v-model="state.nodeBackgroundType"
              @change="
                (val:any) => handleFieldChange('nodeBackgroundType', String(val))
              "
            >
              <el-radio :label="'1'">纯色</el-radio>
              <el-radio :label="'2'">图片</el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="form-tab" v-if="state.nodeBackgroundType === '1'">
          <div class="form-tab__label">背景色</div>
          <div class="form-tab__field">
            <el-color-picker v-model="state.nodeBackground" />
          </div>
        </div>
        <div class="form-tab" v-else>
          <div class="form-tab__label">背景图片</div>
          <div class="form-tab__field">
            <el-input
              v-model="state.nodeBackground"
              placeholder="请输入图片地址"
            >
              <template #append>
                <div class="node-background-preview">
                  <img
                    class="node-background-preview__img"
                    :src="state.nodeBackground"
                    alt=""
                    srcset=""
                  />
                </div>
              </template>
            </el-input>
          </div>
        </div>
      </div>
      <div class="settings-panel-area">
        <el-divider content-position="left">连接线</el-divider>
        <div class="form-tab">
          <div class="form-tab__label">连线颜色</div>
          <div class="form-tab__field">
            <el-color-picker v-model="state.linkStroke" />
          </div>
        </div>
        <div class="form-tab">
          <div class="form-tab__label">连线字体大小</div>
          <div class="form-tab__field">
            <el-input-number
              v-model="state.linkLabelFontSize"
              :min="12"
              :max="30"
              :step="1"
            ></el-input-number>
          </div>
        </div>
        <div class="form-tab">
          <div class="form-tab__label">连线文字颜色</div>
          <div class="form-tab__field">
            <el-color-picker v-model="state.linkLabelColor" />
          </div>
        </div>
      </div>
      <div class="settings-panel-area">
        <el-divider content-position="left">关系数据</el-divider>
        <el-button style="width: 100%" type="primary" @click="handleEditData"
          >编辑数据</el-button
        >
        <div style="height: 24px"></div>
      </div>
    </el-scrollbar>
  </div>
</template>
<script lang="ts" setup>
const maxHeight = window.innerHeight;
const state: SettingState = reactive({
  background: "#f8f8dc",
  nodeRadius: 30,
  width: window.innerWidth - 400,
  height: window.innerHeight,
  nodeLabelFontSize: 13,
  nodeLabelColor: "#333333",
  linkStrokeWidth: 1,
  linkStroke: "#333333",
  nodeStroke: "#333333",
  nodeStrokeWidth: 1,
  nodeBackgroundType: "1",
  // nodeBackground: "http://159.75.210.117:8033/sia/img/m1.png",
  nodeBackground: "#FF4533",
  linkLength: 90,
  forceModelList: ["link", "collision", "charge", "center"],
  dragable: true,
  linkLabelFontSize: 13,
  linkLabelColor: "#333333",
  openBorder: true,
});

const nodeRadius = ref(state.nodeRadius);
const linkLength = ref(state.linkLength);
const emit = defineEmits<{
  (e: "change", state: any): void;
  (e: "showDataPanel"): void;
}>();
watch(state, () => {
  console.log(state);
  emit("change", state);
});
function handleFieldChange(field: keyof SettingState, val: number | string) {
  console.log(field, val);
  if (field === "nodeBackgroundType") {
    if (val === "1") {
      state.nodeBackground = "#FF1234";
    } else {
      state.nodeBackground = "http://159.75.210.117:8033/sia/img/m1.png";
    }
    return;
  }
  if (field === "forceModelList") {
    // console.log(val);
    let [idxG, idxC] = [
      state.forceModelList.indexOf("gravity"),
      state.forceModelList.indexOf("charge"),
    ];
    if (idxG !== -1 && idxC !== -1) {
      state.forceModelList.splice(Math.min(idxC, idxG), 1);
    }
    return;
  }
  state[field] = val as never;
}

function handleEditData() {
  console.log("showDataPanel");
  emit("showDataPanel");
}
</script>
<script lang="ts">
import { reactive, defineComponent, watch, defineEmits, ref } from "vue";
export default defineComponent({
  name: "SettingPanel",
});
export interface SettingState {
  width: number;
  height: number;
  background: string;
  nodeRadius: number;
  nodeLabelFontSize: number;
  nodeLabelColor: string;
  linkStrokeWidth: number;
  linkStroke: string;
  nodeStroke: string;
  nodeStrokeWidth: number;
  /**
   * 节点背景：1纯色，2图片
   */
  nodeBackgroundType: "1" | "2";
  nodeBackground: string;
  dragable: boolean;
  /**
   * 连接线长度
   */
  linkLength: number;
  /**
   * 力模型列表
   */
  forceModelList: Array<
    "link" | "collision" | "positioning" | "charge" | "center" | "gravity"
  >;
  linkLabelFontSize: number;
  linkLabelColor: string;
  openBorder: boolean;
}
</script>
<style lang="scss">
.settings-panel {
  background-color: #ffffff;
  width: 400px;
  font-size: 14px;
  color: #333333;
  overflow: hidden;
  .settings-panel-area {
    padding: 0 16px;
  }
  .form-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 12px;
    &__label {
      min-width: 120px;
      text-align: right;
    }
    &__field {
      margin-left: 24px;
      width: 100%;
      text-align: left;
    }
  }
  .node-background-preview {
    width: 32px;
    height: 32px;
    &__img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
